<template>
  <!-- 招标名录 -->
  <div style="position: relative;">
    <el-card style="height: calc( 100vh - 85px); overflow: auto">
      <!-- 信息搜索框 -->
      <el-form v-model="queryObj" label-width="120px" size="large">
        <el-row>
          <el-col :span="6">
            <el-form-item label="标的名称">
              <el-input v-model.trim="queryObj.title" placeholder="标的名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名">
              <el-input v-model.trim="queryObj.projectName" placeholder="项目名" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目号">
              <el-input v-model.trim="queryObj.projectSerial" placeholder="项目号" />
            </el-form-item>
          </el-col>
          <searchbutton
            :isopen="isopen"
            @isopenclickfn="isopenclick"
            @resetQueryfn="queryObj.reset()"
            @queryClickfn="queryClick"
          />
        </el-row>
      </el-form>
      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom: 10px">
        <div style="float: left">
          <el-button v-permission="'InviteList-Add'" type="primary" plain @click="AddInviteClick">
            <i class="el-icon-plus" />新增招标
          </el-button>
        </div>
      </el-row>

      <!-- 任务总表   v-if="queryObj.userName !== ''"-->
      <el-table
        ref="operationTable"
        v-loading="listLoading"
        :data="tableData"
        border
        height="calc( 100vh - 275px)"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        style="width: 100%;  margin-bottom: 10px;"
      >
        <el-table-column v-if="buttons.indexOf('InviteList-edit')>-1 || buttons.indexOf('InviteList-delete')>-1" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              v-permission="'InviteList-edit'"
              type="text"
              size="small"
              @click="editInviteClick(scope.row)"
            >{{ $t('button.Edit') }}</el-button>
            <el-button
              v-permission="'InviteList-delete'"
              style="color:orangered;"
              type="text"
              size="small"
              @click="deleteClick(scope.row)"
            >{{ $t('button.Delete') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标的名称" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detailsClick(scope.row)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度" align="center" width="100px">
          <template slot-scope="scope">
            <el-tag type="info">{{ getInviteProgressString(scope.row.progress) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="round" label="当前轮次" align="center" width="80px">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.round }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名" align="center" />
        <el-table-column prop="projectSerial" label="项目号" align="center" />
        <el-table-column show-overflow-tooltip prop="summary" label="项目概况" align="center" />
        <el-table-column prop="supplyGroup" label="分组" align="center" />
      </el-table>
      <!-- 分页组件 -->
      <paging
        :pagion-obj="pagionObj"
        :handle-size-change="handleSizeChange"
        :handle-page-change="handlePageChange"
      />
    </el-card>

    <!-- 新增招标 -->
    <AddInviteDialog :add-invite-dialog-flag.sync="addInviteDialogFlag" @updateValue="updateValue" />
    <!-- 编辑招标 -->
    <EditInviteDialog
      :edit-invite-dialog-flag.sync="editInviteDialogFlag"
      :invite-info="CurrentInviteInfo"
      @updateValue="updateValue"
    />

    <!-- 编辑bid配置 -->
    <el-dialog top="3vh" width="500px" :before-close="editBidClose" :visible.sync="editBidDialog">
      <el-form ref="editBid" :model="editBidData" size="small" label-width="120px">
        <el-form-item label="供应商名">
          <el-input v-model.trim="editBidData.supplierName" placeholder="供应商名" />
        </el-form-item>
        <el-form-item label="投标说明">
          <el-input v-model.trim="editBidData.remark" placeholder="投标说明" />
        </el-form-item>
        <el-form-item label="总价（含税）">
          <el-input v-model="editBidData.total" placeholder="总价（含税）" />
        </el-form-item>
        <el-form-item label="取消">
          <el-input v-model="editBidData.dueCycle" placeholder="取消" />
        </el-form-item>
        <!-- <el-form-item label="inviteId">
          <el-input v-model="editBidData.inviteId" placeholder="inviteId" />
        </el-form-item>-->
        <el-form-item>
          <el-button
            type="primary"
            plain
            size="medium"
            @click="editBidConfirm"
          >{{ $t('button.Confirm') }}</el-button>
          <el-button size="medium" @click="editBidClose">{{ $t('button.Cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  InviteGetList,
  DeleteFileInfo,
  InviteDelete,
  InvitePagion,
  // getEmail,
  GetFileById,
  GetFile,
  UpdateBid,
  DeleteBid,
  Bidding
} from '@/api/SRM'
import { Message } from 'element-ui'
import Bid from './components/Bid.vue'
import AddInviteDialog from './components/AddInviteDialog.vue'
import EditInviteDialog from './components/EditInviteDialog.vue'
import config from '@/config'
import permission from '@/permission/index.js' // 权限判断指令
import { getInviteProgressString } from '@/filters/index.js'
import { QueryModelItem, QueryModelBuilder } from '@/utils/vuage.js'

export default {
  name: 'Invite',
  directives: { permission },
  components: { Bid, AddInviteDialog, EditInviteDialog },
  data() {
    return {
      addInviteDialogFlag: false,
      editInviteDialogFlag: false,
      CurrentInviteInfo: {},
      // 查询数据
      queryObj: {},
      // 分页的数据
      pagionObj: {
        size: 20,
        currentPage: 1,
        total: 100
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      buttons: JSON.parse(sessionStorage.getItem('buttons')) || [],
      isopen: false,
      // 页面loding效果
      listLoading: true,
      // 上传地址
      actionData: `http://${document.location.hostname}:${document.location.port}/File/Upload`,

      // 详情弹窗及数据
      detailsData: {},
      detailsDialog: false,
      // 文件弹窗及数据
      FileDialog: false,
      FileData: [],
      searchFile: [],
      // 招标弹窗及数据
      editBidDialog: false,
      editBidData: {
        id: 0,
        supplierName: '',
        remark: '',
        total: 0,
        dueCycle: 0,
        inviteId: 0
      }
    }
  },
  async mounted() {
    this.queryData()
  },
  created() {
    this.queryObj = new QueryModelBuilder([
      new QueryModelItem('page', 0),
      new QueryModelItem('size', 0),
      new QueryModelItem('title', ''),
      new QueryModelItem('projectName', ''),
      new QueryModelItem('projectSerial', ''),
      new QueryModelItem('supplyGroup', '')
    ]).build()
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.queryObj.size = this.pagionObj.size
      this.queryObj.page = this.pagionObj.currentPage
      try {
        this.listLoading = true
        const res = await InvitePagion(this.queryObj)
        this.tableData = res.data.data
        this.pagionObj.pageCount = res.data.pageCount
        this.pagionObj.total = res.data.count
      } catch (error) {
        Message.error('获取数据失败')
      } finally {
        this.listLoading = false
      }
    },
    updateValue() {
      this.queryData()
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1
      this.queryData()
    },
    /** 获取项目阶段中文 */
    getInviteProgressString(data) {
      return getInviteProgressString(data)
    },

    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val
      this.queryData()
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val
      this.queryData()
    },

    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen
    },

    /** 新增招标 */
    async AddInviteClick() {
      this.addInviteDialogFlag = true
    },
    /** 编辑招标信息 */
    editInviteClick(data) {
      this.CurrentInviteInfo = data
      this.editInviteDialogFlag = true
    },
    /** 删除招标信息 */
    deleteClick(data) {
      this.$confirm('确认删除当前招标吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await InviteDelete({ id: data.id })
          this.queryData()
          Message.success('操作成功')
        })
        .catch(() => {})
    },
    /** 打开招标详情界面 */
    detailsClick(data) {
      this.$router.push({
        name: 'InviteDetail',
        query: { id: data.id }
      })
    },

    // 上传
    onsuccess(response, file, fileList) {
      console.log(response, file, fileList, 'response, file, fileList')
      this.AddInviteData.files.push(response.data)
      Message.success('上传成功')
      this.queryData()
    },
    // 判断是否勾选文件
    importDoc() {
      this.$refs['upload1'].$el.click() // 打开上传文件弹窗
      // if (this.$refs.mainTable.selection.length > 1) { return Message.warning('只能勾选一条数据') }
      // if (this.$refs.mainTable.selection.length > 0) {
      //   this.$refs['upload1'].$el.click() // 打开上传文件弹窗
      // } else {
      //   // 不满足上传条件
      //   Message.warning('请选择文件')
      // }
    },
    // 下载
    async downLoadClick(data) {
      // const baseURL =
      //   (process.env.NODE_ENV === 'development'
      //     ? config.baseUrl.dev
      //     : config.baseUrl.build) || config.baseUrl.build
      window.open(`${config.baseUrl.dev}File/Download?id=${data.id}`)
    },
    // 删除当前文件
    deletefilesClick(data) {
      console.log(this.detailsData, data, 'detailsData')
      this.$confirm('确认删除当前文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await DeleteFileInfo({
            inviteId: this.detailsData.id,
            fileId: data.id
          })
          const res = await InvitePagion(this.queryObj)
          res.data.data.forEach(item => {
            if (item.id === this.detailsData.id) {
              this.detailsData = item
            }
          })
          this.tableData = res.data.data
          Message.success('操作成功')
        })
        .catch(() => {})
    },
    // 招标修改
    editbidsClick(data) {
      for (const key in data) {
        this.editBidData[key] = data[key]
      }
      // this.editBidData.id = data.id;
      // this.editBidData.supplierName = data.supplierName;
      // this.editBidData.remark = data.remark;
      // this.editBidData.total = data.total;
      // this.editBidData.dueCycle = data.dueCycle;
      // this.editBidData.inviteId = data.inviteId;
      this.editBidDialog = true
    },
    // bid编辑的确认
    async editBidConfirm() {
      await UpdateBid(this.editBidData)
      Message.success('操作成功')
      const res = await InvitePagion(this.queryObj)
      res.data.data.forEach(item => {
        if (item.id === this.detailsData.id) {
          this.detailsData = item
        }
      })
      this.tableData = res.data.data
      this.editBidDialog = false
    },
    // bid编辑弹窗关闭
    editBidClose() {
      // this.editBidData = {
      //   id: 0,
      //   supplierName: "",
      //   remark: "",
      //   total: 0,
      //   dueCycle: 0,
      //   inviteId: 0
      // };
      this.editBidDialog = false
    },

    // 改变row的背景
    tableRowClassName({ row, rowIndex }) {
      // console.log(row.isTimeout,rowIndex);
      if (row.bidResult) {
        return 'success-row'
      }
      return ''
    },
    // 删除上传文件
    deleteFileClick(data) {
      this.$confirm('确认删除当前Bid吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.AddInviteData.files.forEach((item, index) => {
          if (item.id === data.id) {
            this.AddInviteData.files.splice(index, 1)
          }
        })
      })
    }
  }
}
</script>

<style>
.el-table .success-row {
  background: goldenrod;
}
</style>
